<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>城市</title>
    <meta name="viewport" content="width = device-width , initial-scale = 1 , minimum-scale = 1 , maximum-scale = 1 , user-scalable = no">
    <link rel="stylesheet" href="../../resource/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../resource/css/common.css">
    <link rel="stylesheet" href="../../resource/css/style.css">
</head>
<body>
<!-----------------------页头-------------------------->
<div id="header" style="position: relative;">
    <a class="to_position" id="fanhui">&#xe732;返回</a>
    <div id="sousuo_input">
        <span id="btn_1">&#xe62b;</span>
        <input id="search_city" type="text" placeholder=" 请输入城市名">
    </div>
    <a class="add_fanhui">返回</a>
</div>

<div class="city">
    <!---------------------GPS定位----------------------->
    <div class="location">
        <p>GPS定位</p>
        <p><a class="gps_location" onclick="search_linkToIndex(this)"></a></p>
    </div>
    <!---------------------热门城市----------------------->
    <div class="hot_city location">
        <p>热门城市</p>
        <p>
            <a onclick="search_linkToIndex(this)">上海市</a>
            <a onclick="search_linkToIndex(this)">北京市</a>
            <a onclick="search_linkToIndex(this)">广州市</a>
            <a onclick="search_linkToIndex(this)">深圳市</a>
        </p>
    </div>
    <!-----------------字母顺序排列城市------------------------>
    <div class="city_detail">
        <ul></ul>
    </div>
    <!-----------------字母表------------------------>
    <div class="words_list">
        <label>热</label>
        <div class="slider-nav">
            <ul>
                <li><a href="#a">a</a></li>
                <li><a href="#b">b</a></li>
                <li><a href="#c">c</a></li>
                <li><a href="#d">d</a></li>
                <li><a href="#e">e</a></li>
                <li><a href="#f">f</a></li>
                <li><a href="#g">g</a></li>
                <li><a href="#h">h</a></li>
                <li><a href="#i">i</a></li>
                <li><a href="#j">j</a></li>
                <li><a href="#k">k</a></li>
                <li><a href="#l">l</a></li>
                <li><a href="#m">m</a></li>
                <li><a href="#n">n</a></li>
                <li><a href="#o">o</a></li>
                <li><a href="#p">p</a></li>
                <li><a href="#q">q</a></li>
                <li><a href="#r">r</a></li>
                <li><a href="#s">s</a></li>
                <li><a href="#t">t</a></li>
                <li><a href="#u">u</a></li>
                <li><a href="#v">v</a></li>
                <li><a href="#w">w</a></li>
                <li><a href="#x">x</a></li>
                <li><a href="#y">y</a></li>
                <li><a href="#z">z</a></li>
            </ul>
        </div>
    </div>
</div>
<!---------------------词汇联想------------------>
<div class="city_associate">
    <ul></ul>
</div>
<script src="../../resource/js/jquery.min.js"></script>
<script src="../../resource/js/bootstrap.min.js"></script>
<script src="../../resource/js/commonjs.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=qVrWQw9Vs8t7iPfG7bSj0137" type="text/javascript"></script>
<script>
    var isLoaded = false;
    var allCity=new Array();
    var cityPinYin=new Array();
    $(function () {
        var myCity = new BMap.LocalCity();
        myCity.get(getPosition);
        /*加载所有的城市*/
        var url = "/Account/getCity";
        var arg = {};
        ajaxJsonp(url, arg, getCity);

        $(".add_fanhui").click(function(){
            $("#search_city").val("");
        })
        $("#fanhui").click(function(){
            location.href="../../index.html?url=1";
        })
    })

    /*输入框在获得焦点时，头部发生的变化*/
    $("#search_city").focus(function(){
        $("#fanhui").css({"display":"none"})
        $("#sousuo_input").css({
            "margin-right":"15%",
            "width":"80%",
            "transition":"all 1s"
        })
        $(".add_fanhui").css({
            "opacity":"1",
            "transition":"opacity 0.5s linear 0.5s"
        })
    })

    /*输入框在按下键盘时，内容部分发生的改变*/
    $("#search_city").keydown(function(){
        $(".city").css({"display":"none"})
    })
    /*点击输入框后面的返回*/
    $(".add_fanhui").click(function(){
        $(".city").css({ "display" : "block" });
        $("#fanhui").css({
            "display":"block"
        })
        $("#sousuo_input").css({
            "margin-right":"3.5%",
            "width":"70%",
            "transition":"all 0.01s"
        })
        $(".add_fanhui").css({
            "opacity":"0",
            "transition":"all 0.01s"
        })
        $(".city_associate div").remove();
        $(".city_associate ul li").remove();
    })

    /*城市搜索页面城市的获取*/
    function getCity(res){
        var citySrcList=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
        for(var i=0;i<citySrcList.length;i++){
            var add_letter='<li id='+citySrcList[i]+'><a class="title">'+citySrcList[i]+'</a><ul class="a_detail"></ul></li>';
            $(".city_detail>ul").append(add_letter);
        }
        for(var i=0;i<res.data.length;i++){
            var areaName=res.data[i].areaname;
            allCity.push(areaName);   //将城市的名字存入数组，用于后面的搜索
            var pinyin=res.data[i].pinyin;
            cityPinYin.push(pinyin);
            var first_letter=pinyin.charAt(0);
            var add_city='<li><a onclick="search_linkToIndex(this)">'+areaName+'</a></li>';
            $("#"+first_letter+" .a_detail").append(add_city);
        }
    }
    function search_linkToIndex(target){
        var city_name = $(target).text();
        saveCookie("city", city_name, 20, "path=/");
        window.location.href = "../../index.html?url="+Math.random();
    }

    /*输入城市时的词汇联想和点击搜索图标时显示结果*/
    $("#search_city").keyup(function(){
        $(".city_associate ul li").remove();
        add_associateCity();
    })
    $("#sousuo_input #btn_1").click(function(){
        $(".city_associate div").remove();
        $(".city_associate ul li").remove();
        add_searchCity();
    })
    function add_associateCity(){
        var city_value=$("#search_city").val();
        if(city_value!=""&&city_value!=undefined){
            var indexArr1=allCity.selectLike(city_value);
            var indexArr2=cityPinYin.selectLike(city_value);
            var indexArr=$.unique($.merge(indexArr1,indexArr2))
            for(var j=0;j<indexArr.length;j++) {
                for (var k = 0; k < allCity.length; k++) {
                    if (indexArr1[j] == k) {
                        var add_city = '<li><a onclick="search_linkToIndex(this)">' + allCity[k] + '</a></li>';
                        $(".city_associate ul").append(add_city);
                    }
                }
            }
        }
    }
    function add_searchCity(){
        var city_value=$("#search_city").val();
        if(city_value!=""&&city_value!=undefined){
            var indexArr1=allCity.selectLike(city_value);
            var indexArr2=cityPinYin.selectLike(city_value);
            var indexArr=$.unique($.merge(indexArr1,indexArr2))
            if(indexArr.length<=0){
                $(".city_associate").append('<div class="shops_noResult">未找到您搜索的城市，请重新输入！</div>');
            }else{
                for(var j=0;j<indexArr.length;j++) {
                    for (var k = 0; k < allCity.length; k++) {
                        if (indexArr1[j] == k) {
                            var add_city = '<li><a onclick="search_linkToIndex(this)">' + allCity[k] + '</a></li>';
                            $(".city_associate ul").append(add_city);
                        }
                    }
                }
            }

        }
    }
    /*获取定位的城市*/
    function getPosition(result) {
        var cityName = result.name;
        if(cityName == "全国" || cityName == "深圳"){
            $(".gps_location").text("成都市");
        }else{
            $(".gps_location").text(cityName);
        }
    }
    //为字符串添加模糊比较的方法
    String.prototype.isLike = function(exp/*类似于SQL中的模糊查询字符串*/, i/*是否区分大小写*/) {
        var str = this;
        i = i == null ? false : i;
        if (exp.constructor == String) {
            /*首先将表达式中的‘_’替换成‘.’，但是‘[_]’表示对‘_’的转义，所以做特殊处理*/
            var s = exp.replace(/_/g, function(m, i) {
                if (i == 0 || i == exp.length - 1) {
                    return ".";
                }
                else {
                    if (exp.charAt(i - 1) == "[" && exp.charAt(i + 1) == "]") {
                        return m;
                    }
                    return ".";
                }
            });
            /*将表达式中的‘%’替换成‘.’，但是‘[%]’表示对‘%’的转义，所以做特殊处理*/
            s = s.replace(/%/g, function(m, i) {
                if (i == 0 || i == s.length - 1) {
                    return ".*";
                }
                else {
                    if (s.charAt(i - 1) == "[" && s.charAt(i + 1) == "]") {
                        return m;
                    }
                    return ".*";
                }
            });

            /*将表达式中的‘[_]’、‘[%]’分别替换为‘_’、‘%’*/

            s = s.replace(/\[_\]/g, "_").replace(/\[%\]/g, "%");

            /*对表达式处理完后构造一个新的正则表达式，用以判断当前字符串是否和给定的表达式相似*/

            var regex = new RegExp("^" + s, i ? "" : "i");
            return regex.test(this);
        }
        return false;
    };

    //为数组添加模糊查询方法
    Array.prototype.selectLike = function(exp/*类似于SQL中的模糊查询字符串*/, fun) {
        var arr = [];
        if (fun && fun.constructor == Function) {
            for (var i = 0; i < this.length; i++) {
                if (fun(this[i], exp)) {
                    arr.push(i);
                }
            }
        }
        else {
            for (var i = 0; i < this.length; i++) {
                if (this[i].isLike(exp, false)) {
                    arr.push(i);
                }
            }
        }
        return arr;
    };

</script>
</body>
</html>